<template>
  <div id="app">
    <div style="width: 100%; height: 100%;" ref="main2"></div>
  </div>
</template>
<script>
export default {
  name: 'columnLineEcharts',
  /*1. Vue扩展 */
  extends: '', // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {},
  model: { prop: '', event: '' }, // model 会使用到 props
  data() {
    return {
      // lineData: [50, 40, 30, 50, 10],
      // barData: [60, 70, 50, 20, 70]
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {
    this.drawChart();
  },
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    initInfo(item) {
      // console.log(item, "itemitemitemitemitem");
      this.drawChart();
    },
    drawChart() {
        // 基于准备好的dom，初始化echarts实例

        // let myChart = this.$echarts.init(document.getElementById('main2'));
        let myChart = this.$echarts.init(this.$refs.main2);
        // 指定图表的配置项和数据
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            textStyle:{
              fontSize: 15,//字体大小
              color: '#38BBEE'//字体颜色
            },
          },
          grid: {
            top: '18%',
            left: '3%',
            right: '4%',
            bottom: '18%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['上海', '深圳', '杭州', '成都', '南京', '武汉', '苏州'],
              axisLabel: {
                textStyle: {
                  color: '#38BBEE'
                  //fontSize: 18
                },
              },
            }
          ],
          yAxis: [
            {
              type: 'value',
              // name: '总和',
              min: 0,
              max: 40000,
              interval: (40000-0)/5,
              color: '#38BBEE',
              axisLabel: {
                textStyle: {
                  color: '#38BBEE'
                  //fontSize: 18
                },
                formatter: '{value} '
              },
            },
            {
              type: 'value',
              // name: '增长率',
              min: 0,
              max: 5,
              interval: (5-0)/5,
              axisLabel: {
                textStyle: {
                  color: '#38BBEE'
                  //fontSize: 18
                },
                formatter: '{value} %'
              },
              axisLine: {
                lineStyle: {
                  color: '#666'
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#666'
                }
              }
            }
          ],
          series: [
            {
              name: '企业数量',
              type: 'bar',
              barWidth: 10,
              data: [31640, 23502, 16230, 9423, 10551, 9415, 28965],
              itemStyle: {
                normal: {
                  color: '#5ACAF4'
                },
              }
            },
            {
              name: '融资总金额',
              data: [2707.58, 15495.62, 2367.27, 78.74, 872.78, 52.13, 448.15],
              type: 'line',
              symbol: 'circle',
              lineStyle: {
                normal: {
                  color: '#2585FC'
                },
              }
            },
            {
              name: '大型企业占比',
              data:  [2.27, 2.22, 1.88, 2.63, 1.9, 1.87, 1.2],
              type: 'line',
              symbol: 'circle',
              lineStyle: {
                normal: {
                  color: '#7DFBC3'
                },
              }
            },
            
          ]
        };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped lang="scss">
#main2 {
//   margin-top: 10px;
}
</style>
